<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<f:view xmlns="http://www.w3.org/1999/xhtml"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.org/ui">
<h:html>
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Visualizador de ruta optima</title>
        <link href="css/style.css" rel="stylesheet"/>
    </h:head>

    <h:body styleClass="page-one">
        <h:form id="formMapa">
            <p:growl id="growl" showDetail="true" sticky="true" />
            <p:layout styleClass="panel-titulo">
                <p:layoutUnit position="center"  styleClass="cabecera" >
                    <h:panelGroup>
                        <h:graphicImage url="pics/logo.jpg" styleClass="logo" >
                        </h:graphicImage>
                    </h:panelGroup>
                </p:layoutUnit>
            </p:layout>
            <p:layout styleClass="panel-cnt">
                <p:layoutUnit position="west" styleClass="panel-menu">
                    <h:panelGrid columns="1">
                        <p:commandLink value="Planificador de Rutas" ></p:commandLink>
                    </h:panelGrid>
                </p:layoutUnit>
                <p:layoutUnit position="center"  styleClass="panel-dato">
                    <p:layout>
                    <p:layoutUnit position="center" styleClass="mapa" id="idMapa">
                        <h:panelGrid columns="1">
                                    <p:dataTable id="puntosMapa"
                                                             var="item"
                                                             value="#{PuntosMapaBean.listaPuntosMapaVOs}"
                                                             rows="10"
                                                             paginator="true"
                                                             paginatorPosition="bottom"
                                                             paginatorAlwaysVisible="false"
                                                             styleClass="tabla-ep">
                                            <p:column id="modelHeader"  styleClass="columna-nombre">
                                                    <f:facet name="header">
                                                            Item
                                                    </f:facet>
                                                    <h:outputText value="#{item.item}" />
                                            </p:column>

                                            <p:column styleClass="columna-nombre">
                                                    <f:facet name="header">
                                                            Orden
                                                    </f:facet>
                                                    <h:outputText value="#{item.orden}"  />
                                            </p:column>
                                            <p:column styleClass="columna-nombre">
                                                    <f:facet name="header">
                                                            Direccion
                                                    </f:facet>
                                                    <h:outputText value="#{item.direccion}"  />
                                            </p:column>
                                    </p:dataTable>
                        </h:panelGrid>
                    </p:layoutUnit>
                    <p:layoutUnit position="south" styleClass="sur" >
                        <p:commandButton value="Cerrar"
                                         id="btnCerrar"
                                         styleClass="boton"
                                         action="mostrar-principal"
                                         />
                    </p:layoutUnit>
                    </p:layout>
                </p:layoutUnit>
             </p:layout>
        </h:form>
    </h:body>
</h:html>
</f:view>
